import React, { Component } from 'react'
import './index.css';
import axios from 'axios';

//https://game.gtimg.cn/images/lgamem/act/lrlib/js/hero/10052.js
export default class HeroDetail extends Component {
    //状态
    state = {
        info: {}
    }

    render() {
        //解构赋值
        let {info} = this.state;
        return (
            <div className="hero-detail">
                {/* 大图 */}
                <div className="container">
                    <img src={info?.hero?.poster} alt="" />
                </div>

                <div className="container">
                    <h2>{info?.hero?.name}</h2>
                    <p>角色定位: {info?.hero?.roles[0]}</p>
                    <h3>技能介绍</h3>
                    <ul>
                        {info?.spells?.map((item, index) => {
                            return <li key={index}>
                                {item.name}
                            </li>
                        })}
                    </ul>
                </div>
            </div>
        )
    }

    //生命周期钩子 
    async componentDidMount(){
        //声明英雄的 id
        let id = 10059;
        
        //发送请求获取英雄的数据
        let result = await axios('https://game.gtimg.cn/images/lgamem/act/lrlib/js/hero/'+id+'.js');
        //获取数据
        this.setState({
            info: result.data
        })
    }
}
